<template>
  <div class="blog">
    <img src="../assets/newYear/xtChineseKnot.png" class="xtChineseKnot" />
    <div class="bloglist">
      <div class="article-title">
        <i class="fa fa-envira fa-fw"></i><span class="title-blog">blogs</span>
      </div>
      <article
        :class="[index % 2 ? 'flex' : 'flex-reverse']"
        class="article"
        v-for="(item, index) in blogs"
        :key="index"
      >
        <div class="left">
          <div class="uptime">
            <i class="el-icon-alarm-clock"></i>发布于
            {{ item.add_time | dateTimeFilter(true, "-") }}
          </div>
          <p class="title" @click="handleRouter(item.id)">
            {{ item.article_title }}
          </p>
          <div class="meta flex">
            <div class="metai">
              <i class="el-icon-folder-opened"></i>分类<span class="name">{{
                item.cate_name
              }}</span>
            </div>
            <div class="metai">
              <i class="el-icon-chat-dot-round"></i>评论<span class="name"
                >200</span
              >
            </div>
            <div class="metai">
              <i class="el-icon-hot-water"></i>热度<span class="name">{{
                item.visit
              }}</span>
            </div>
          </div>
          <div class="content">{{ item.article_content }}</div>
        </div>
        <div class="right">
          <!-- <img :src="item.article_pic" /> -->
          <img
            src="https://www.photock.jp/photo/small/photo0000-4201.jpg"
            alt=""
          />
        </div>
      </article>
      <LoadMore :status="status" @changeStatus="handleLoadBlogs"></LoadMore>
    </div>
  </div>
</template>

<script>
import LoadMore from "@/components/LoadMore/index";
import { blogList } from "@/apiv/article";
export default {
  components: {
    LoadMore,
  },
  data() {
    return {
      status: 0,
      form: {
        page: 1,
        limit: 10,
      },
      blogs: [],
    };
  },
  mounted() {
    this.handleLoadBlogs();
  },
  methods: {
    // 跳转博客详情
    handleRouter(id) {
      this.$router.push({
        path: `/detail/${id}`,
      });
    },
    //
    // 加载博客
    handleLoadBlogs() {
      if (this.status != 0) return;
      this.status = 1;
      blogList(this.form).then((res) => {
        this.blogs = this.blogs.concat(res.data);
        this.status = res.data.length == this.form.limit ? 0 : 2;
        this.form.page += 1;
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.title-blog {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0.6rem 2rem;
  box-sizing: border-box;
  margin: 0 0 0.4rem;
  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "📄";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
p {
  margin-block-start: 0;
  margin-block-end: 0;
}
.blog {
  font-size: 16px;
  line-height: 1.8rem;
  background: rgb(234, 231, 223) !important;
  position: relative;
}
.xtChineseKnot {
  position: absolute;
  right: 50px;
  top: 0;
  z-index: 1;
  transform: translateX(50%);
  transform-origin: top;
  animation: xtChineseKnot 2s infinite linear;
}
.bloglist {
  padding: 20px 0;
  margin: 0 auto;
  width: 850px;
}
.article-title {
  margin-top: 20px;
  border-bottom: 1px dashed #ececec;
  color: rgba(0, 0, 0, 0.66);
  font-size: 18px;
}
.article {
  // text-shadow: 1px 1px 1px #fff;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  margin: 40px 0;
  .left {
    box-sizing: border-box;
    padding: 30px;
    width: 45%;
    color: rgba(0, 0, 0, 0.66);
    .uptime {
      font-size: 14px;
    }
    .title {
      font-size: 18px;
      font-weight: bold;
      margin: 10px 0;
      color: rgba(0, 0, 0, 0.7);
      cursor: pointer;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .title:hover {
      color: rgba(0, 0, 0);
    }
    .name {
      margin: 0 3px;
      border-bottom: 1px dashed #999;
    }
    .meta {
      font-size: 14px;
      color: #555;
    }
    .meta .metai:nth-child(2) {
      padding: 0 12px;
    }
    .content {
      padding-top: 10px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      color: #333333;
    }
  }
  .right {
    width: 55%;
    position: relative;
  }
  .right::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 15%;
    width: 2px;
    height: 20px;
    background-color: aquamarine;
    transform-origin: top;
    transform-style: preserve-3d;
    animation: axis 2s infinite 2s linear, show 2s linear;
  }
  .right::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 10%;
    width: 50px;
    height: 50px;
    background-image: url("../assets/newYear/lantern.png");
    background-size: cover;
    transform-origin: top;
    animation: lantern 2s infinite 2s linear, show 2s linear;
  }

  @keyframes axis {
    0%,
    50%,
    100% {
      transform: perspective(100px) rotate3d(0, 0, 0, 0deg);
    }
    25% {
      transform: perspective(100px) rotate3d(0, 0, 1, 20deg);
    }
    75% {
      transform: perspective(100px) rotate3d(0, 0, 1, -20deg);
    }
  }
  @keyframes lantern {
    0%,
    50%,
    100% {
      transform: perspective(100px) rotate3d(0, 0, 0, 0deg);
    }
    25% {
      transform: perspective(100px) rotate3d(0, 0, 1, 40deg);
    }
    75% {
      transform: perspective(100px) rotate3d(0, 0, 1, -40deg);
    }
  }
  @keyframes show {
    from {
      transform: scale(0) rotateY(0deg);
    }
    to {
      transform: scale(1) rotate(360deg);
    }
  }
  @keyframes xtChineseKnot {
    0%,
    50%,
    100% {
      transform: perspective(100px) rotate3d(0, 0, 0, 0deg);
    }
    25% {
      transform: perspective(100px) rotate3d(0, 0, 1, 10deg);
    }
    75% {
      transform: perspective(100px) rotate3d(0, 0, 1, -10deg);
    }
  }
  .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>